<template>
  <div class="box">
    <ul>
      <li>
        <img src="https://s3.bmp.ovh/imgs/2021/11/3c2a0917169944f4.png" alt="" />
        <div class="info">疫情管理系统</div>
      </li>
      <li>
        <img src="https://s3.bmp.ovh/imgs/2021/11/875ab761c2f3b2f5.png" alt="" />
        <div class="info">疫情管理系统</div>
      </li>
      <li>
        <img src="https://s3.bmp.ovh/imgs/2021/11/2159f4bf111aa13c.png" alt="" />
        <div class="info">后台管理系统</div>
      </li>
      <li>
        <img src="https://s3.bmp.ovh/imgs/2021/11/9a3eebecb5f5628c.png" alt="" />
        <div class="info">后台管理系统</div>
      </li>
      <li class="page">
        <img src="https://s3.bmp.ovh/imgs/2021/11/cafd31b19ca1a7b0.png" alt="" />
        <div class="info">严选商城首页</div>
      </li>
      <li class="page">
        <img src="https://s3.bmp.ovh/imgs/2021/11/0b877371824f1ff0.png" alt="" />
        <div class="info">严选商城分类</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
.box {
  width: 1200px;
  overflow: hidden;
  margin: 40px auto;
}

.box ul {
  list-style: none;
}

.box ul li {
  float: left;
  width: 380px;
  height: 210px;
  margin-right: 20px;
  /* 子绝父相 */
  position: relative;
}

.box ul li img {
  width: 380px;
  height: 210px;
}
.box ul li.page img {
  width: 115px;
}

.box ul li .info {
  position: absolute;
  width: 370px;
  height: 30px;
  line-height: 30px;
  color: white;
  bottom: 0;
  padding-left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  /* 透明度设置为0，不是背景的透明度，而是整体的透明度 */
  opacity: 0;
  /* 过渡 */
  transition: opacity 2s ease 0s;
}

/* 当li被触碰的时候，内部的info盒子就要把透明度变为1 */
.box ul li:hover .info {
  opacity: 1;
}
</style>
